<template>
<div style="box-shadow: 5px 5px 10px 0px  rgba(0, 0, 0, 0.2);">
    <br>
    <el-form :inline="true" :model="orderSearch" class="demo-form-inline">
    <el-form-item label="用户ID">
      <el-input v-model="orderSearch.userId" placeholder="用户ID" clearable />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="getPage">搜索</el-button>
    </el-form-item>
  </el-form>
  <el-divider />

  <el-table :data="orderList" stripe style="width: 100%">
      <el-table-column type="index" label="序号" width="50" />
      <el-table-column prop="userId" label="用户ID"  />
      <el-table-column prop="businessId" label="商家ID"  />
      <el-table-column prop="orderDate" label="订单日期" />
      <el-table-column prop="orderTotal" label="订单总值" />
      <el-table-column prop="daId" label="地址ID" />
      <el-table-column prop="orderStatusName" label="订单状态" />
      <el-table-column  label="操作" >
        <template #default="scope">
          <el-button size="small"  @click="edit(scope.row)">
            修改订单状态
          </el-button>
          <el-button size="small"  @click="showDetail(scope.row)">
            订单详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  <el-divider />


    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[2, 10, 15, 20]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />


  <el-dialog v-model="dialogFormVisible" :title="dTitle" width="500">
    <el-form :model="order.orderStatus">
        <span>当前状态为{{ order.orderStatusName }}</span>
      <el-form-item label="修改订单状态为" >
        <el-radio-group v-model="order.orderStatus">
        <el-radio :value="2">已取消</el-radio>
        <el-radio :value="4">已派送</el-radio>
         </el-radio-group>
      </el-form-item>

    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消修改</el-button>
        <el-button type="primary" @click="onSubmit">
          确认修改
        </el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog v-model="dialogDetailFormVisible" :title="dTitle" width="500">
    <p>用户ID:{{ orderDetail.userId }}</p>
    <p>订单总值:{{ orderDetail.orderTotal }}</p>
    <p>订单商家:{{ orderDetail.shop.shop_name }}</p>
    <p>商家地址:{{ orderDetail.shop.shop_address }}</p>
    <p>配送费:{{ orderDetail.shop.delivery_price }}</p>
    <p>商家信息:{{ orderDetail.shop.shop_explain }}</p>
    <p v-for="item in orderDetail.list">
      <span>{{ item.food.foodName }} {{ item.food.foodPrice }}</span>
      <span>x{{ item.quantity }}</span>
    </p>
    <p>订单状态：{{ orderDetail.orderStatus }}</p>
  </el-dialog>
  <br>
  </div>
</template>

<script setup>
import { onBeforeMount, reactive, ref } from 'vue';
import { ElMessage, ElMessageBox  } from 'element-plus';
import axios from 'axios';
import qs from 'qs';

const orderSearch = reactive({
  userId: '',
  businessId: '',
  orderDate: '',
  orderTotal: '',
  daId: '',
  orderStatus: '',
});
const orderList= ref([]);
const order = reactive({});
const currentPage = ref(1);
const pageSize = ref(2);
const total = ref(0);
const dialogFormVisible = ref(false);
const dialogDetailFormVisible = ref(false);
const dTitle = ref('');
let orderDetail=reactive({

});
const edit = (row) => {
 dialogFormVisible.value = true;
 dTitle.value = '修改订单状态';
 order.orderStatus=row.orderStatus;
    order.orderId=row.orderId;
    order.orderStatusName=row.orderStatusName;
};
const showDetail = (row) => {
  dTitle.value = '订单详情';
  axios.get('http://localhost:7444/order/getOrderDetailByOrderId/'+row.orderId).then((response)=>{
      if(response.data.code==200){
       console.log(response.data.data);
       orderDetail=response.data.data;
       console.log(orderDetail);
       dialogDetailFormVisible.value=true;
      }
  })
  
};
const handleSizeChange = (val) => {
  console.log(val);
  pageSize.value = val;
  getPage(); 
};
const handleCurrentChange = (val) => {
  console.log(val);
  currentPage.value = val;
  getPage(); 
};
const business= JSON.parse(sessionStorage.getItem('businessData'));
console.log(business);
const getPage = () => {
  console.log(currentPage.value);
  const data = {
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    userId: orderSearch.userId,
    businessId:business.id
  };
  
  console.log(data);
    axios.get('http://localhost:7444/order/pageSelectOrder?'+qs.stringify(data)).then((response)=>{
        if(response.data.code==200){
            orderList.value=response.data.data.list;
            total.value = response.data.data.totalCount;
        }
    })
};
const onSubmit = () => {
    axios.put('http://localhost:7444/order/changeOrderStatus',order).then((response)=>{
      if(response.data.code==200){
        ElMessage({
          message: '修改成功',
          type: 'success',
        });
        dialogFormVisible.value=false;
        getPage();
      }
    })
};

onBeforeMount(() => {
  getPage();
});

</script>

<style lang="scss" scoped>

</style>